<template>
  <div class="bg-style">
    <i-pageBody class="add_i-color">
      <div slot="page-main">
        <div class="container container-space container-space--vertical">
          <div class="container-space__child">
            <Form
              ref="form"
              :model="formdata"
              :rules="rules"
              :label-width="100"
            >
              <Row :gutter="20">
                <i-col style="float:left;width:300px">
                  <FormItem prop="custId" label="客户名称：">
                    <Select
                      v-model="formdata.custId"
                      placeholder="请选择客户名称"
                      style="100%"
                      @on-change="handleCust"
                      clearable
                    >
                      <Option
                        :value="value"
                        v-for="({ label, value }, index) in options.custs"
                        :key="index"
                        >{{ label }}</Option
                      >
                    </Select>
                  </FormItem>
                </i-col>
                <i-col style="float:left;width:300px">
                  <FormItem prop="devid" label="采集对象：">
                    <Select
                      v-model="formdata.devid"
                      placeholder="请选择采集对象"
                      style="100%"
                      clearable
                    >
                      <Option
                        :value="value"
                        v-for="({ label, value }, index) in options.devids"
                        :key="index"
                        >{{ label }}</Option
                      >
                    </Select>
                  </FormItem>
                </i-col>
                <i-col style="float:left;width:200px">
                  <Button
                    type="primary"
                    @click="handleQuery"
                    :loading="loading.search"
                  >
                    查询
                  </Button>
                  <Button
                    type="default"
                    @click="handleReset"
                    :loading="loading.reset"
                  >
                    重置
                  </Button>
                </i-col>
              </Row>
            </Form>
          </div>
          <div class="container-space__child container-align--right">
            <Button type="default" @click="handleSetting">
              设置
            </Button>
          </div>
          <div class="container-space__child">
            <Table
              :columns="columns"
              :data="nextData"
              border
              stripe
              :loading="tableLoading"
            ></Table>
          </div>
          <div class="container-space__child  " v-show="nextData.length > 0">
            <div class="container-page">
              <PageHeader
                :total="formdata.total"
                :page-size="formdata.pageSize"
                :page="formdata.page"
              ></PageHeader>
              <Page
                :total="formdata.total"
                :current="formdata.page"
                :page-size="formdata.pageSize"
                @on-change="handlePage"
                show-sizer
                @on-page-size-change="handlePageSize"
              />
            </div>
          </div>
        </div>
      </div>
    </i-pageBody>
    <Modal v-model="edit.modal" :width="650" title="添加任务">
      <div>
        <Form
          ref="editForm"
          :model="edit.formdata"
          :rules="edit.rules"
          :label-width="120"
        >
          <FormItem prop="custId" label="客户名称：">
            <Select
              v-model="edit.formdata.custId"
              placeholder="请选择客户名称"
              style="100%"
              @on-change="handleEditCust"
              clearable
            >
              <Option
                :value="value"
                v-for="({ label, value }, index) in options.custs"
                :key="index"
                >{{ label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem prop="devid" label="采集对象：">
            <Select
              v-model="edit.formdata.devid"
              placeholder="请选择采集对象"
              style="100%"
              clearable
            >
              <Option
                :value="value"
                v-for="({ label, value }, index) in options.edit.devids"
                :key="index"
                >{{ label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem prop="taskSource" label="任务来源：">
            <Select
              v-model="edit.formdata.taskSource"
              placeholder="请选择任务来源"
              style="100%"
              clearable
            >
              <Option
                :value="value"
                v-for="({ label, value }, index) in options.edit.taskSources"
                :key="index"
                >{{ label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem prop="taskType" label="任务类型：">
            <Select
              v-model="edit.formdata.taskType"
              placeholder="请选择任务来源"
              style="100%"
              clearable
            >
              <Option
                :value="value"
                v-for="({ label, value }, index) in options.edit.tasks"
                :key="index"
                >{{ label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem prop="setLevel" label="优先级：">
            <InputNumber
              :min="0"
              style="width:120px"
              v-model="edit.formdata.setLevel"
              clearable
            ></InputNumber>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="default" @click="edit.modal = false">
          取消
        </Button>
        <Button
          type="primary"
          @click="postInsertIescollecttask"
          :loading="loading.save"
        >
          保存
        </Button>
      </div>
    </Modal>
    <Modal v-model="setting.modal" :width="1200" title="优先级设置">
      <div><Setting ref="ref-setting"></Setting></div>
      <div slot="footer">
        <Button type="default" @click="setting.modal = false">
          关闭
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import PageHeader from "../../components/page-header";
import Setting from "./setting";
import {
  TABLE_COLUMNS,
  RULES_EDIT,
  RULES_SEARCH,
  TASK_SOURCE_OPTIONS,
  TASK_OPTIONS
} from "./constants";
import {
  getSWarningCust,
  getIescollecttaskCustId,
  getIescollecttaskDevid,
  getIescollecttaskShow,
  putIescollecttaskReduceLevel,
  putIescollecttaskPlusLevel,
  postInsertIescollecttask
} from "@/api/scada";
export default {
  name: "warning",
  props: {},
  data() {
    const columns = [...TABLE_COLUMNS];
    return {
      options: {
        custs: [],
        devids: [],
        edit: {
          devids: [],
          taskSources: TASK_SOURCE_OPTIONS,
          tasks: TASK_OPTIONS
        }
      },
      loading: {
        normal: false,
        search: false,
        reset: false,
        page: false,
        save: false,
        reduce: false,
        plus: false
      },
      formdata: {
        custId: "",
        devid: "",
        page: 1,
        pageSize: 10,
        total: 0
      },
      rules: RULES_SEARCH,
      columns,
      data: [],
      edit: {
        modal: false,
        formdata: {
          custId: "",
          taskType: "",
          devid: "",
          setLevel: null,
          taskSource: ""
        },
        rules: RULES_EDIT
      },
      reduce: {
        id: ""
      },
      plus: {
        id: ""
      },
      setting: {
        modal: false
      }
    };
  },
  computed: {
    tableLoading() {
      const {
        loading: { normal, search, reset, page }
      } = this;
      return normal || search || reset || page;
    },
    nextData() {
      const { data } = this;
      return data.map((element) => {
        const { taskSource, taskType } = element || {};
        const { label: nextTaskSource } =
          TASK_SOURCE_OPTIONS.find((option) => option.value === taskSource) ||
          {};
        const { label: nextTaskType } =
          TASK_OPTIONS.find((option) => option.value === taskType) || {};
        return { ...element, nextTaskSource, nextTaskType };
      });
    }
  },
  mounted() {
    this.getSWarningCust();
  },
  watch: {
    "setting.modal"(val) {
      if (val) return;
      this.getIescollecttaskShow();
    }
  },
  methods: {
    handleSetting() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return this.$Message.error("请选择客户名称和采集对象");
        }
        this.setting.modal = true;
        this.$refs["ref-setting"].handleEntry({ devid: this.formdata.devid });
      });
    },
    handleQuery() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.getIescollecttaskShow("search");
      });
    },
    handleReset() {
      this.$refs.form.resetFields();
      this.data = [];
    },
    handlePage(page) {
      this.formdata.page = page;
      this.getIescollecttaskShow("page");
    },
    handlePageSize(pageSize) {
      this.formdata.pageSize = pageSize;
      this.getIescollecttaskShow("page");
    },
    handleCreate() {
      this.edit.modal = true;
    },
    handleCust() {
      this.formdata.devid = "";
      this.options.devids = [];
      if (this.formdata.custId) {
        this.getIescollecttaskDevid("query");
      }
    },
    handleEditCust() {
      this.edit.formdata.devid = "";
      this.options.edit.devids = [];
      if (this.edit.formdata.custId) {
        this.getIescollecttaskDevid("edit");
      }
    },
    getSWarningCust() {
      getSWarningCust().then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          this.options.custs = (result || []).map((element) => {
            const { custId, custName } = element || {};
            return {
              value: custId || "",
              label: custName || ""
            };
          });
        }
      });
    },
    getIescollecttaskDevid(type = "query") {
      let custId = "";
      if (type === "query") {
        custId = this.formdata.custId;
      } else if (type === "edit") {
        custId = this.edit.formdata.custId;
      }
      getIescollecttaskDevid({ custId }).then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          const devids = (result || []).map((element) => {
            const { equipName, equipId } = element || {};
            return {
              value: equipId || "",
              label: equipName || ""
            };
          });
          if (type === "query") {
            this.options.devids = devids;
          } else if (type === "edit") {
            this.options.edit.devids = devids;
          }
        }
      });
    },
    getIescollecttaskShow(loadingType = "normal") {
      this.loading[loadingType] = true;
      const {
        formdata: { devid, page: pageNum, pageSize }
      } = this;
      const params = {
        devid,
        pageNum,
        pageSize
      };
      getIescollecttaskShow(params)
        .then((ret) => {
          const { code, result } = ret || {};
          if (code === 200) {
            const { totalPage, iescollecttaskVO } = result || {};
            this.formdata.total = totalPage || 0;
            this.data = iescollecttaskVO || [];
          }
        })
        .finally(() => {
          this.loading[loadingType] = false;
        });
    },
    putIescollecttaskPlusLevel(data) {
      const { id } = data;
      this.plus.id = id;
      this.loading.plus = true;
      putIescollecttaskPlusLevel(data)
        .then((ret) => {
          const { code, result } = ret || {};
          if (code === 200) {
            this.getIescollecttaskShow();
          }
        })
        .finally(() => {
          this.loading.plus = false;
        });
    },
    putIescollecttaskReduceLevel(data) {
      const { id } = data;
      this.reduce.id = id;
      this.loading.reduce = true;
      putIescollecttaskReduceLevel(data)
        .then((ret) => {
          const { code, result } = ret || {};
          if (code === 200) {
            this.getIescollecttaskShow();
          }
        })
        .finally(() => {
          this.loading.reduce = false;
        });
    },
    postInsertIescollecttask() {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) return;
        this.loading.save = true;
        const {
          edit: {
            formdata: { taskType, devid, setLevel, taskSource }
          },
          formdata: { devid: searchDevid }
        } = this;
        const params = {
          taskType,
          devid,
          setLevel,
          taskSource
        };
        postInsertIescollecttask(params)
          .then((ret) => {
            const { code, result } = ret || {};
            if (code === 200) {
              if (devid === searchDevid) {
                this.getIescollecttaskShow();
              }
              this.$refs.editForm.resetFields();
              this.edit.modal = false;
            }
          })
          .finally(() => {
            this.loading.save = false;
          });
      });
    }
  },
  components: { PageHeader, Setting }
};
</script>
<style scoped lang="scss">
.bg-style {
  background: url(~@/assets/img/welcome.png) center no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}
.container {
  padding: 20px;
  height: 100%;
  overflow: auto;
}
.container-title {
  padding-left: 10px;
  font-size: 16px;
  color: #333;
  position: relative;
}
.container-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0893fd;
  line-height: 16px;
}

.container-space > .container-space__child:not(:last-child) {
  margin-right: 20px;
}
.container-space.container-space--vertical
  > .container-space__child:not(:last-child) {
  margin-bottom: 20px;
  margin-right: 0;
}
.container-space--inner {
  padding: 20px;
}

.container-align--center {
  text-align: center;
}
.container-align--right {
  text-align: right;
}
.container-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style>
.ivu-btn-ghost {
  color: #fff;
  background: transparent;
}
</style>
<style lang="scss" scoped>
/deep/ .ivu-table-tip table tr td {
  text-align: center;
  background-image: url("~@/assets/img/zwsj.png");
  background-position: center 60px;
  background-repeat: no-repeat;
  color: #999;
  height: 369px;
  background-size: 190px;
  span {
    display: none;
  }
}
</style>
